<template>
  <div class="login-panel">
    <nav-back :to="{name:'find'}" />
    <img :src="loginIcon" class="login-icon">
    <input
      type="text"
      class="input-wrap"
      name="username"
      v-model="username"
      placeholder="用户名/邮箱"
      maxlength="12"
    />
    <input
      type="password"
      class="input-wrap"
      name="password"
      v-model="password"
      placeholder="密码"
      maxlength="12"
    />
    <div class="submit" @click="handleLogin">
      <button-comp text="登陆" size="large" />
    </div>
    <router-link
      class="goto-sign-up"
      :to="{name:'sign-up'}"
    >没有账号? 快来注册吧.</router-link>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { NavBack, ButtonComp } from '@/components'
import loginIcon from '@/assets/icons/when-login.png'

export default {
  name: 'login-panel',
  components: { NavBack, ButtonComp },
  data: () => ({
    loginIcon,
    username: '',
    password: ''
  }),
  methods: {
    ...mapActions('User', ['login', 'getUser']),
    ...mapActions('Toast', ['addToast']),
    handleLogin() {
      const { username, password } = this
      if (username && password) {
        this.login({ username, password })
          .then(res => {
            this.getUser()
            this.$router.replace({ name: 'find' })
            this.addToast({ type: 'success', content: '登陆成功' })
          })
          .catch(err => {
            this.addToast({ type: 'error', content: err })
          })
      } else {
        this.addToast({ type: 'warning', content: '请完整填写信息' })
      }
    }
  },
  beforeRouteLeave(from, to, next) {
    this.username = ''
    this.password = ''
    next()
  }
}
</script>

<style lang="stylus">
$input-size = 20px;

.login-panel {
  min-height: 100vh;
  background-color: #fff;
}

.login-icon {
  display: block;
  margin: 30px auto 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.input-wrap {
  display: block;
  margin: 20px auto 0;
  width: 280px;
  max-width: 80%;
  padding: 0.25 * $input-size 0.75 * $input-size;
  line-height: $input-size;
  font-size: 16px;
  border: none;
  outline: none;
  border-radius: $input-size;
  background-color: $app-bgc;
}

.submit {
  margin-top: 30px;
  text-align: center;
}

.goto-sign-up {
  display: block;
  margin-top: 30px;
  text-align: center;
  color: $font-color;
}
</style>
